---
metaTitle: Getting started
metaDescription: Install Radix Themes and start building in minutes
---

# Getting started

<Description>Install Radix Themes and start building in minutes.</Description>

Radix Themes is a pre-styled component library that is designed to work out of the box with minimal configuration. If you are looking for the unstyled components, go to [Radix Primitives](/primitives).

## Installation

Getting up and running is quick and easy.

### 1. Install Radix Themes

Install the package from your command line.

<Tabs.Root asChild defaultValue="npm">
  <CodeBlock.Root my="5">
    <CodeBlock.Header>
      <Tabs.List>
        <Tabs.Trigger value="npm">npm</Tabs.Trigger>
        <Tabs.Trigger value="yarn">yarn</Tabs.Trigger>
        <Tabs.Trigger value="pnpm">pnpm</Tabs.Trigger>
      </Tabs.List>
    </CodeBlock.Header>

    <Tabs.Content asChild value="npm">
      <CodeBlock.Content>
        <CodeBlock.Pre>
          <CodeBlock.Code language="bash">
            {'npm install @radix-ui/themes'}
          </CodeBlock.Code>
        </CodeBlock.Pre>
        <CodeBlock.CopyButton />
      </CodeBlock.Content>
    </Tabs.Content>

    <Tabs.Content asChild value="yarn">
      <CodeBlock.Content>
        <CodeBlock.Pre>
          <CodeBlock.Code language="bash">
            {'yarn add @radix-ui/themes'}
          </CodeBlock.Code>
        </CodeBlock.Pre>
        <CodeBlock.CopyButton />
      </CodeBlock.Content>
    </Tabs.Content>

    <Tabs.Content asChild value="pnpm">
      <CodeBlock.Content>
        <CodeBlock.Pre>
          <CodeBlock.Code language="bash">
            {'pnpm add @radix-ui/themes'}
          </CodeBlock.Code>
        </CodeBlock.Pre>
        <CodeBlock.CopyButton />
      </CodeBlock.Content>
    </Tabs.Content>

  </CodeBlock.Root>
</Tabs.Root>

### 2. Import the CSS file

Import the global CSS file at the root of your application.

```ts
import "@radix-ui/themes/styles.css";
```

### 3. Add the Theme component

Add `Theme` to your application, wrapping the root component inside of `body`.

```jsx line=7,9
import { Theme } from "@radix-ui/themes";

export default function () {
	return (
		<html>
			<body>
				<Theme>
					<MyApp />
				</Theme>
			</body>
		</html>
	);
}
```

### 4. Start building

You are now ready to use Radix Themes components.

```jsx
import { Flex, Text, Button } from "@radix-ui/themes";

export default function MyApp() {
	return (
		<Flex direction="column" gap="2">
			<Text>Hello from Radix Themes :)</Text>
			<Button>Let's go</Button>
		</Flex>
	);
}
```

## Customizing your theme

Configuration is managed and applied via the [Theme](/themes/docs/components/theme) component.

### Basic configuration

Pass [configuration](/themes/docs/components/theme) to the `Theme` to customize appearance.

```jsx line=1
<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
	<MyApp />
</Theme>
```

### Using the theme panel

`ThemePanel` is a drop-in component that allows you to preview the theme in real time. Visit the [component playground](/themes/playground) to see it in action.

To add `ThemePanel` to your app, import it from the package and drop it inside your root `Theme`.

```jsx line=7
import { Theme, ThemePanel } from "@radix-ui/themes";

export default function () {
	return (
		<Theme>
			<MyApp />
			<ThemePanel />
		</Theme>
	);
}
```

### Take it further

Get the most out of Radix Themes by exploring more concepts and features.

{

  <Grid columns={{ initial: '1', xs: '2' }} my="6" gap="4">
      <ThemesLinkCard
        title="Styling"
        desc="Learn how to approach styling and overrides with Radix Themes."
        href="/themes/docs/overview/styling"
      />

      <ThemesLinkCard
        title="Layout"
        desc="Get to know the layout primitives and their available properties."
        href="/themes/docs/overview/layout"
      />

      <ThemesLinkCard
        title="Theme overview"
        desc="Anatomy of a theme and how to create the perfect style for your app."
        href="/themes/docs/theme/overview"
      />

      <ThemesLinkCard
        title="Color"
        desc="Understand the color system and its application in your theme."
        href="/themes/docs/theme/color"
      />

       <ThemesLinkCard
        title="Dark mode"
        desc="Integrate a great looking dark mode into your app using appearances."
        href="/themes/docs/theme/dark-mode"
      />

      <ThemesLinkCard
        title="Typography"
        desc="Add custom typefaces and fine tune typographic details."
        href="/themes/docs/theme/typography"
      />

    </Grid>

}
